import {useEffect, useState} from 'react';
import {Button, Descriptions, Steps, theme, Radio, Space, Table} from 'antd';
import './app.css';
import MainTyreSelect from "./components/calculateComponent/mainTyreSelect";

function App() {

  const [current, setCurrent] = useState(0); // 当前步骤

  const [mainLandingGearColumnNum, setMainLandingGearColumnNum] = useState(); // 主起落架立柱
  const [frontLandingGearColumnNum, setFrontLandingGearColumnNum] = useState(); // 前起落架立柱

  // 主起落架单个立柱轮胎
  const [mainLandingGearSingleColumnTireNum, setMainLandingGearSingleColumnTireNum] = useState();
  // 前起落架单个立柱轮胎
  const [frontLandingGearSingleColumnTireNum, setFrontLandingGearSingleColumnTireNum] = useState();

  const [mainLandingData, setMainLandingData] = useState([]);
  const [previousLandingData, setPreviousLandingData] = useState([]);

  const [mainWheelsSelect, setMainWheelsSelect] = useState(null);

  const [filters, setFilters] = useState([]);

  const [W, setW] = useState(null);
  const [F_1, setF_1] = useState(null);
  const [F_2, setF_2] = useState(null);
  const [F_3, setF_3] = useState(null);
  const [V, setV] = useState(null);

  function categorizeItems(items) {
    const categorized = items.reduce((acc, item) => {
      if (!acc[item.category]) {
        acc[item.category] = [];
      }
      acc[item.category].push(item);
      return acc;
    }, {});

    return {
      mainLanding: categorized.mainLanding || [],
      previousLanding: categorized.previousLanding || [],
    };
  }

  /**
   * 主起落架立柱数量选择
   * @param e
   */
  function mainLandingGearColumnNumChange(e) {
    setMainLandingGearColumnNum(e.target.value);
  }

  /**
   * 前起落架立柱数量选择
   * @param e
   */
  function frontLandingGearColumnNumChange(e) {
    setFrontLandingGearColumnNum(e.target.value);
  }

  /**
   * 主起落架单个立柱轮胎数量选择
   * @param e
   */
  function mainLandingGearSingleColumnTireNumChange(e) {
    setMainLandingGearSingleColumnTireNum(e.target.value);
  }

  /**
   * 前起落架单个立柱轮胎数量选择
   * @param e
   */
  function frontLandingGearSingleColumnTireNumChange(e) {
    setFrontLandingGearSingleColumnTireNum(e.target.value);
  }

  /**
   * 步骤控制
   * @param num
   */
  function control(num) {
    if (current + num >= 0 && current + num <= 3) {
      setCurrent(current + num);
    }
  }

  const descriptionItems01 = [
    {
      key: '1',
      label: '飞机最大总重(kg)',
      span: 2,
      children: '20400'
    },
    {
      key: '2',
      label: '飞机最大总重(kg)',
      span: 2,
      children: '1或2个',
    },
    {
      key: '3',
      label: '飞机最大总重(kg)',
      span: 4,
      children: '通常情况下每个支柱上安装俩个轮胎会更安全，此外，每个支柱上安装俩个或者四个轮胎，在很大程度上取决于预期轮舱的布局。',
    },
  ];
  const descriptionItems02 = [
    {
      key: '1',
      label: '飞机最大总重(kg)',
      span: 2,
      children: '20400'
    },
    {
      key: '2',
      label: '飞机最大总重(kg)',
      span: 2,
      children: '1或2个'
    }
  ]
  const descriptionItems03 = [
    {
      key: '1',
      label: '飞机最大总重(kg)',
      span: 2,
      children: '20400',
    },
    {
      key: '2',
      label: '主起落架最大停机载荷(kg)',
      span: 2,
      children: '80.05',
    },
    {
      key: '3',
      label: '飞机地面最大速度(km/h)',
      span: 2,
      children: '300',
    },
  ];
  const descriptionItems04 = [
    {
      key: '1',
      label: '飞机最大总重(kg)',
      span: 2,
      children: '20400',
    },
    {
      key: '2',
      label: '前起落架最大停机载荷(kN)',
      span: 2,
      children: '60.037',
    },
    {
      key: '3',
      label: '前起落架最大刹车的前轮载荷(kN)',
      span: 2,
      children: '91.207',
    },
    {
      key: '4',
      label: '飞机地面最大速度(km/h)',
      span: 2,
      children: '300',
    },
  ];

  /* 表格列定义 */
  const tableColumns03 = [
    {
      title: '序号',
      dataIndex: 'listNumber',
      render: (val, record, index) => <div>{index + 1}</div>
    },
    {
      title: '类型',
      dataIndex: 'type',
      showSorterTooltip: {
        target: 'full-header',
      },
      align: 'center',
      // filters: filters,
      render: (val, record, index) => <div>{index + 1}</div>
    },
    {
      title: '序号',
      dataIndex: 'listNumber',
      render: (val, record, index) => <div>{index + 1}</div>
    },
  ];

  const rowClassName = (record, index) => {
    // 通过索引的奇偶性来判断应用哪个类名
    if (index % 2 === 0) {
      return 'even-row'; // 偶数行应用 'even-row' 类名
    }
    return 'odd-row'; // 奇数行应用 'odd-row' 类名
  };

  const mainRowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setMainWheelsSelect(selectedRows);
    },
  };

  const rowSelection01 = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setMainWheelsSelect(selectedRows);
    },
  }

  const columns = [
    {
      title: '序号', dataIndex: 'listNumber', key: 'listNumber',
      render: (val, record, index) => index+1,width: "5%", align: "center",
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      showSorterTooltip: {
        target: 'full-header',
      },
      align: "center",
      filters: filters,
      onFilter: (value, record) => record.type.indexOf(value) === 0,
    },
    {
      title: '尺寸(×25.4)(mm×mm)',
      dataIndex: 'size',
      key: 'size',
      align: "center",
    },
    {
      title: '额定层数',
      dataIndex: 'ratedLayers',
      key: 'ratedLayers',
      align: "center",
    },
    {
      title: '额定载荷(kN)',
      dataIndex: 'ratedLoad',
      key: 'ratedLoad',
      align: "center",
      sorter: (a, b) => a.ratedLoad- b.ratedLoad,
    },
    {
      title: '充气压力(×6895)(Pa)',
      dataIndex: 'inflationPressure',
      key: 'inflationPressure',
      align: "center",
      sorter: (a, b) => a.InflationPressure- b.InflationPressure,
    },
    {
      title: '额定速度(×0.447)(m/s)',
      dataIndex: 'ratedVelocity',
      key: 'ratedVelocity',
      align: "center",
      sorter: (a, b) => a.ratedVelocity- b.ratedVelocity,
    },
    {
      title: '最大直径(×25.4)(mm)',
      dataIndex: 'maxDiameter',
      key: 'maxDiameter',
      align: "center",
      sorter: (a, b) => a.maxDiameter- b.maxDiameter,
    },
    {
      title: '最大宽度(×25.4)(mm)',
      dataIndex: 'maxWidth',
      key: 'maxWidth',
      align: "center",
      sorter: (a, b) => a.maxWidth- b.maxWidth,
    },
    {
      title: '重量(×0.454)(kg)',
      dataIndex: 'weight',
      key: 'weight',
      align: "center",
      sorter: (a, b) => a.weight- b.weight,
    },
  ];

  const steps = [
    {
      title: '单个起落架支柱数选择',
      content: <div>
        <Descriptions
          title="输入参数"
          column={4}
          bordered
          items={descriptionItems01}
        />

        <h3 style={{
          fontWeight: "bold",
          fontSize: "17px",
          marginTop: "23px"
        }}>主起落架立柱数量选择</h3>
        <Radio.Group onChange={mainLandingGearColumnNumChange} value={mainLandingGearColumnNum}>
          <Space direction="vertical">
            <Radio value={1}>1个立柱</Radio>
            <Radio value={2}>2个立柱</Radio>
            <Radio value={4}>4个立柱</Radio>
          </Space>
        </Radio.Group>
        <h3 style={{
          fontWeight: "bold",
          fontSize: "17px",
          marginTop: "23px"
        }}>前起落架立柱数量选择</h3>
        <Radio.Group onChange={frontLandingGearColumnNumChange} value={frontLandingGearColumnNum}>
          <Space direction="vertical">
            <Radio value={1}>1个立柱</Radio>
            <Radio value={2}>2个立柱</Radio>
            <Radio value={4}>4个立柱</Radio>
          </Space>
        </Radio.Group>
      </div>,
    },
    {
      title: '单个支柱轮胎数选择',
      content: <div>
        <Descriptions
          title="输入参数"
          column={4}
          bordered
          items={descriptionItems02}
        />

        <h3 style={{
          fontWeight: "bold",
          fontSize: "17px",
          marginTop: "23px"
        }}>主起落架单个立柱轮胎数量选择</h3>
        <Radio.Group
          onChange={mainLandingGearSingleColumnTireNumChange}
          value={mainLandingGearSingleColumnTireNum}
        >
          <Space direction="vertical">
            <Radio value={1}>1个轮胎</Radio>
            <Radio value={2}>2个轮胎</Radio>
            <Radio value={4}>4个轮胎</Radio>
          </Space>
        </Radio.Group>
        <h3 style={{
          fontWeight: "bold",
          fontSize: "17px",
          marginTop: "23px"
        }}>前起落架单个立柱轮胎数量选择</h3>
        <Radio.Group
          onChange={frontLandingGearSingleColumnTireNumChange}
          value={frontLandingGearSingleColumnTireNum}
        >
          <Space direction="vertical">
            <Radio value={1}>1个轮胎</Radio>
            <Radio value={2}>2个轮胎</Radio>
            <Radio value={4}>4个轮胎</Radio>
          </Space>
        </Radio.Group>
      </div>,
    },
    {
      title: '主起落架轮胎选择',
      content: <div>
        <Descriptions
          title="输入参数"
          column={4}
          bordered
          items={descriptionItems03}
        />
        <MainTyreSelect
          W={W} F_1={F_1} V={V}
          mainTyreNum={mainLandingGearSingleColumnTireNum}
        />

        <Table
          rowClassName={rowClassName}
          rowKey={"id"}
          rowSelection={rowSelection01}
          columns={columns}
          dataSource={mainLandingData}
        />
      </div>,
    },
    {
      title: '前起落架轮胎选择',
      content: 'Last-content',
    },
  ];

  const stepItems = steps.map((item) => ({
    key: item.title,
    title: item.title,
  }));

  useEffect(() => {
    window.electronAPI.reqAllTyre();
    window.electronAPI.resAllTyre((event, res) => {
      console.log('mainLandingData:', res);
      const categorizedResult = categorizeItems(res);
      setMainLandingData(categorizedResult.mainLanding);
      setPreviousLandingData(categorizedResult.previousLanding);

      setTimeout(() => {

      }, 1000);

      const originalArray = res.map(item => item.type);
      // 使用Set去重
      const uniqueSet = new Set(originalArray);
      // 将Set转换回数组，并映射到对象数组，其中每个对象都有一个value属性
      const uniqueArrayObjects = Array.from(uniqueSet).map(value => ({ value, text:value }));
      setFilters(uniqueArrayObjects);
    });
  }, []);

  return <>
    <Steps current={current} items={stepItems} />

    <div>{steps[current].content}</div>

    <div>
      <Button type={"dashed"} onClick={control.bind(this, -1)}>上一步</Button>
      <Button type={"primary"} onClick={control.bind(this, 1)}>
        下一步
      </Button>
    </div>
  </>;
}

export default App
